
{% extends 'base.html.twig' %}

{% block stylesheets %}
{{ css('css/sweet-alert.css') }}    
<style>
    body { background-color: #C61C02; }
    .form-wrapper { width: 180px; margin: 0 auto; color: #fff; font-size: 22px; font-weight: 700; }
    .myform { position: absolute; top: 38%; width: 180px; }
    .myform input, .myform textarea { 
        background: none; padding: 5px; background-color: rgba(3, 3, 3, 0.5); 
        display: block; box-sizing: border-box; border-radius: 10px;
        width: 100%; font-size: 16px; color: #fff;
    }
    .myform input::-webkit-input-placeholder  {
        color: white; text-shadow: none; 
    }
    .search-title { text-align: center; }
    .inp-wrapper { margin: 5px auto; }
    #btnsubmit { width: 117px; margin: 0 auto; display: block; }
    #btnsubmit img { width: 100%; }
    .lucky, .unlucky { text-align: center; top: 38%; position: absolute; display: none; width: 180px; }
    .lucky table { margin: 0 auto; width: 180px; }
    @media all and (min-width: 370px) {
        .form-wrapper { font-size: 26px; font-weight: 700; }
        .myform input { font-size: 18px; }
    }
</style>
{% endblock %}

{% block body %}

<img style='width:100%; ' src='{{ imgsrc("images/searchbg.jpg") }}?v=3'>
<div class='form-wrapper'>
    <form class='myform' method='POST' >
        {#<img class='label' src='{{ imgsrc("images/mobile.png") }}' />#}
        <div class='search-title'>获奖查询</div>
        <div class='inp-wrapper'>
            <input type='tel' name='mobile' id='phone' value='{{ app.user.mobile }}' placeholder='手机号' />
        </div>

        <button id='btnsubmit' type='submit' name='submit'>
            <img src='{{ imgsrc("images/btnsearch.png") }}'/>
        </button>
    </form>        
    <div class='unlucky'>未查询到中奖信息</div>
    <div class='lucky'>
        <div class='lucky-title'>恭喜您</div>
        <table id='mytable'>
        </table>
    </div>
</div>
{% endblock %}
{% block javascripts %}
{{ js('js/sweet-alert.min.js') }}
<script>

$(function(){
    
    var mytable = $('#mytable');
    $('.myform').submit(function(){
        
        var mobile = $('#phone').val();
        if (mobile.length === 0) {
            swal({
                title: '请填写电话',
                confirmButtonColor: '#0889D6',
                text: '',
                type: 'error'
            });
            return false;
        }
        var pattern = /^1\d{10}/;
        if (!pattern.test(mobile)) {
            swal({
                title: '请正确填写电话',
                confirmButtonColor: '#0889D6',
                text: '',
                type: 'error'
            });
            return false;
        }
        window.location.href='{{ urlFor('search')}}'+'?mobile='+mobile;
        {#$.ajax({
            url: '{{ urlFor('search')}}',
            type: 'POST',
            data: {
                mobile: mobile,
                submit: 1
            },
            success: function(rsp){
                $('.myform').hide();
                if(rsp[0] || rsp[1] || rsp[2] ) {
                    var i = 0;
                    var reward;
                    for (i=0;i<3;i++ ){
                        reward = i + 1;
                        if(rsp[i]){
                            mytable.append($("<tr><td>获得"+reward+"等奖"+rsp[i]+"份</td></tr>"));
                        }
                    }
                    $('.lucky').show(); 
                } else {
                    $('.unlucky').show(); 
                }
            }
        });#}
        return false;
    });
});

</script>
{% endblock %}
